<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{margin:0;padding:0;}
		body{background: #000;}
		ul{list-style: none;}
		#box{position: relative;margin:200px auto 0; width:600px;height:300px;border:6px solid #fff;}
		#box .list li{position: absolute;left: 0;top: 0;width: 100%;opacity: 0;}
		#box .list .current{opacity: 1;}
		#box .list img{display: block;width: 100%;}
		#box .count{position: absolute;right: 0;bottom: 10px;}
		#box .count li{float: left;margin-right: 10px; width: 20px;height: 20px;line-height: 20px; text-align: center;font-size: 13px; color: #333; background: #fff;border-radius: 50%;cursor: pointer;}
		#box .count .current{color: #fff; background: #f60;}
	</style>
	<script>
		window.onload = function(){
			var _box = document.getElementById("box");
			var _ul = _box.getElementsByTagName("ul");
			var _img = _ul[0].getElementsByTagName("li");
			var _num = _ul[1].getElementsByTagName("li");
			var timer = null;
			var play = null;
			var index = 0;
			var border = true;

			//图片切换(淡入淡出)
			function show(a){

				//判断图片数量
				if(_img.length <= 1) return;

				var alpha = 0;
				index = a;
				for(var i = 0;i < _num.length; i++){
					_num[i].className = "";
				}
				_num[index].className = "current";

				for(i = 0;i < _img.length; i++){
					_img[i].style.opacity = 0;
				}

				//清除之前的定时器
				clearInterval(timer);

				timer = setInterval(function(){
					alpha += 2;
					alpha >= 100 && (alpha = 100);
					_img[index].style.opacity = alpha / 100;
					alpha == 100 && clearInterval(timer);
				},20);
			}

			//切换按钮
			for(var i = 0;i < _num.length; i++){
				_num[i].index = i;
				_num[i].onmouseover = function(){
					//判断是否是当前
					if(this.className == "current") return;

					show(this.index);
				}
			}

			//自动播放倒序播放
			function autoPlay(){
				play = setInterval(function(){
					border ? index++ : index--;
					index >= _img.length && (index = _img.length - 2, border = false);
					index < 0 && (index = 1, border = true);
					show(index);
				},2000)				
			}

			//自动播放
			/*function autoPlay(){
				play = setInterval(function(){
					index ++;
					index >= _img.length && (index = 0);
					show(index);
				},2000);
			}*/
			autoPlay();

			//鼠标移入关闭自动播放
			_box.onmouseover = function(){
				clearInterval(play);
			}
			_box.onmouseout = function(){
				autoPlay();
			}
		  	
			if(_img.length <= 1){
				clearInterval(play);
			}
		}
	</script>
</head>
<body>
	<div id="box">
		<ul class="list">
			<li class="current"><img src="images/1.jpg" alt=""></li>
			<li><img src="images/2.jpg" alt=""></li>
			<li><img src="images/3.jpg" alt=""></li>
			<li><img src="images/4.jpg" alt=""></li>
		</ul>
		<ul class="count">
			<li class="current">1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
		</ul>
	</div>
</body>
</html>